<template>
	<!-- <view class="uni-margin-wrap">
		<swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item>
				<view class="swiper-item uni-bg-red">A</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-green">B</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item uni-bg-blue">C</view>
			</swiper-item>
		</swiper>
	</view> -->
	
	<view class="warp">
		<uni-card is-full :is-shadow="false">
			<text class="uni-h6">城市地图</text>
		</uni-card>
		<uni-section title="城市地图" type="line" padding>
			<uni-grid :column="4" :show-border="false" :square="false" @change="change01">
				<uni-grid-item v-for="(item ,index) in list01" :index="index" :key="index">
					<view class="grid-item-box">
						<image class="image" :src="item.url" mode="aspectFill" />
						<text class="text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
	</view>


	<view class="warp">
		<uni-card is-full :is-shadow="false">
			<text class="uni-h6">塔坨周边</text>
		</uni-card>
		<uni-section title="塔坨周边" type="line" padding>
			<uni-grid :column="4" :show-border="false" :square="false" @change="change03">
				<uni-grid-item v-for="(item ,index) in list03" :index="index" :key="index">
					<view class="grid-item-box">
						<image class="image" :src="item.url" mode="aspectFill" />
						<text class="text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
	</view>

	<view class="warp">
		<uni-card is-full :is-shadow="false">
			<text class="uni-h6">ORC识别功能</text>
		</uni-card>
		<uni-section title="无边框带角标（3列）" type="line" padding>
			<uni-grid :column="3" :show-border="false" :square="false" @change="change02">
				<uni-grid-item v-for="(item ,index) in list02" :index="index" :key="index">
					<view class="grid-item-box">
						<image class="image" :src="item.url" mode="aspectFill" />
						<text class="text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
	</view>
</template>
<script>
	const chooseLocation = requirePlugin('chooseLocation');
	Page({
		// 从地图选点插件返回后，在页面的onShow生命周期函数中能够调用插件接口，取得选点结果对象
		onShow() {
			const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
		},
		onUnload() {
			// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			chooseLocation.setLocation(null);
		}
	})
	export default {
		components: {},
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				dynamicList: [],
				list01: [{
						url: '/static/car.png',
						text: '停车场',
						badge: '0'
					},
					{
						url: '/static/SUBWAY.png',
						text: '地铁图',
						badge: '1'
					},
					{
						url: '/static/PLANE.png',
						text: '路线规划',
						badge: '99'
					},
					{
						url: '/static/POINT.png',
						text: '逆地址解析',
						badge: '2'
					}
				],
				list02: [{
						url: '/static/OCR.png',
						text: '通用OCR',
						badge: '4'
					},
					{
						url: '/static/ID.png',
						text: '身份证',
						badge: '5'
					},
					{
						url: '/static/BANK.png',
						text: '银行卡',
						badge: '6'
					},
					{
						url: '/static/RUN.png',
						text: '行驶证',
						badge: '7'
					},
					{
						url: '/static/DRIVER.png',
						text: '驾驶证',
						badge: '8'
					},
					{
						url: '/static/OPEN.png',
						text: '营业执照',
						badge: '9'
					}
				],
				list03: [
					{
						url: '/static/map06.png',
						text: '旅游景点',
						badge: '1'
					},
					{
						url: '/static/map01.png',
						text: '美食',
						badge: '0'
					},
					{
						url: '/static/map05.png',
						text: '酒店宾馆',
						badge: '0'
					},
					{
						url: '/static/map02.png',
						text: '生活服务',
						badge: '1'
					},
					{
						url: '/static/map03.png',
						text: '娱乐休闲',
						badge: '99'
					},
					{
						url: '/static/map04.png',
						text: '医疗保健',
						badge: '2'
					},
					{
						url: '/static/map07.png',
						text: '房产小区',
						badge: '99'
					},
					{
						url: '/static/map08.png',
						text: '机构团体',
						badge: '2'
					}
				],
			}
		},
		methods: {
			change01(e) {
				let {
					index
				} = e.detail
				this.list01[index].badge && this.list01[index].badge++
				//当index为0时调用subway方法
				if (index === 0) {
					this.AImap()
				} else if (index === 1) {
					this.subway()
				} else if (index === 2) {
					this.routeplan()
				} else if (index === 3) {
					this.chooseAddress()
				}
			},
			change02(e) {
				let {
					index
				} = e.detail
				this.list02[index].badge && this.list02[index].badge++
				if (index === 0) {
					this.ocr01()
				} else if (index === 1) {
					this.ocr02()
				} else if (index === 2) {
					this.ocr03()
				} else if (index === 3) {
					this.ocr04()
				} else if (index === 4) {
					this.ocr05()
				} else if (index === 5) {
					this.ocr06()
				}
			}, 
			ocr01() { 
				wx.navigateTo({
					url: `../ocr/ocr01/ocr01`
				});
			},
			ocr02(){
				wx.navigateTo({
					url: `../ocr/ocr02/ocr02`
				});
			},
			ocr03(){
				wx.navigateTo({
					url: `../ocr/ocr03/ocr03`
				});
			},
			ocr04(){
				wx.navigateTo({
					url: `../ocr/ocr04/ocr04`
				});
			},
			ocr05(){
				wx.navigateTo({
					url: `../ocr/ocr05/ocr05`
				});
			},
			ocr06(){
				wx.navigateTo({
					url: `../ocr/ocr06/ocr06`
				});
			},
			change03(e) {
				let {
					index
				} = e.detail
				this.list02[index].badge && this.list02[index].badge++
				if (index === 0) {
					this.map01()
				} else if (index === 1) {
					this.map02()
				} else if (index === 2) {
					this.map03()
				} else if (index === 3) {
					this.map04()
				} else if (index === 4) {
					this.map05()
				} else if (index === 5) {
					this.map06()
				} else if (index === 6) {
					this.map07()
				} else if (index === 7) {
					this.map08()
				}
			}, 
			map01() {
				wx.navigateTo({
					url: `../mapA/map01/map01`
				});
			},
			map02() {
				wx.navigateTo({
					url: `../mapA/map02/map02`
				});
			},
			map03() {
				wx.navigateTo({
					url: `../mapA/map03/map03`
				});
			},
			map04() {
				wx.navigateTo({
					url: `../mapA/map04/map04`
				});
			},
			map05() {
				wx.navigateTo({
					url: `../mapA/map05/map05`
				});
			},
			map06() {
				wx.navigateTo({
					url: `../mapA/map06/map06`
				});
			},
			map07() {
				wx.navigateTo({
					url: `../mapA/map07/map07`
				});
			},
			map08() {
				wx.navigateTo({
					url: `../mapA/map08/map08`
				});
			},
			AImap() {
				wx.navigateTo({
					url: `../mapA/map09/map09`
				});

			},
			subway() {
				console.log("11111111111111")
				const key = 'HNDBZ-CBG6J-DG2FI-DZQEJ-SO7FH-DCF3U';
				const referer = 'miniprogram-16';
				wx.navigateTo({
					url: 'plugin://subway/index?key=' + key + '&referer=' + referer
				});
			},
			routeplan() {
				const key = 'HNDBZ-CBG6J-DG2FI-DZQEJ-SO7FH-DCF3U';
				const referer = 'miniprogram-16';
				const enableAI = true;
				const navigation = 1;
				const endPoint = JSON.stringify({
					name: '',
					latitude: 0,
					longitude: 0,
				});
				const layerStyle = 1;
				wx.navigateTo({
					url: `plugin://route-plan/index?key=${key}&referer=${referer}&endPoint=${endPoint}&enableAI=${enableAI}&navigation=${navigation}&layerStyle=${layerStyle}`,
				});
			},
			chooseAddress() {
				wx.navigateTo({
					url: `../mapA/map/map`
				});
			} 
		}
	}
</script>



<style lang="scss">
	.uni-margin-wrap {
		width: 690rpx;
		height: 190rpx;
	}

	.swiper {
		height: 100rpx;
	}

	.swiper-item {
		display: block;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 35px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 100px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>